<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/8/11
  Time: 15:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加学生</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/addstu.css"/>
</head>

<body>
<form action="" method="post">
    <table class="dataintable">
        <tr>
            <td>学号:</td>
            <td><input type="text" name="stu_no"  value="" /></td>
        </tr>
        <tr>
            <td>姓名:</td>
            <td><input type="text" name="stu_name"  value="" /></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="text" name="stu_pwd"  value="" /></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="stu_sex"  value="男" checked="checked" />男
                <input type="radio" name="stu_sex"  value="女" />女
            </td>
        </tr>
        <tr>
            <td>系别:</td>
            <td>
                <select  id="dept" onchange="selectClass()">
                    <option value="">-----选择系别-----</option>
                   <c:forEach var="dept" items="${sessionScope.item}">
                       <option value="${dept.d_id}">${dept.d_name}</option>
                   </c:forEach>
                </select>
            </td>

        </tr>
        <tr>
            <td>班级:</td>
            <td>
                <select name="c_id" id="class">
                    <option value="">----选择班级----</option>

                </select>
            </td>
        </tr>
        <tr>
            <td>邮箱:</td>
            <td>
                <input type="email" name="stu_email" value="" />
            </td>
        </tr>
        <tr>
            <td>联系方式:</td>
            <td>
                <input type="text" name="stu_tel"  value="" />
            </td>
        </tr>
        <tr>
            <td>宿舍楼号</td>
            <td>
                <select  id="dorBuild" onchange="selectdor()">
                    <option value="">-----选择楼号-----</option>
                    <c:forEach var="builds" items="${sessionScope.build}">
                        <option value="${builds.dor_build}">${builds.dor_build}</option>
                    </c:forEach>
                </select>
            </td>
        </tr>
        <tr>
            <td>宿舍号</td>
            <td>
            <select id="dorId" name="dor_id">
                <option value="">----选择宿舍号----</option>
            </select>
            </td>
        </tr>

        <tr>
            <td colspan="2" id="btn_txt">
                <button type="submit" formaction="${pageContext.request.contextPath}/W_AddStuServlet" class="btn btn-info">添加</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button type="reset" class="btn btn-info">重置</button>
            </td>
        </tr>
    </table>
</form>
</body>
<script type="text/javascript">
    function selectClass() {
        var d_id=$("#dept").val();

        jQuery.post("${pageContext.request.contextPath}/AjaxClassServlet",{"d_id":d_id},function (data) {
            var option="";
            jQuery.each(data,function (i, item) {
                //value
                option+="<option value='";
                //数据库SQL尽量大写,
                option+=item.C_ID; //加上""就变成原意字符串了,要他的值就不能加双引号
                option+="'>";
                //显示
                option+=item.C_NAME;
                option+="</option>";
            });
            jQuery("#class").html(option);

        },"JSON");
    }
    function selectdor(){
        var dorBuild= $("#dorBuild").val();
        jQuery.post("${pageContext.request.contextPath}/W_AjaxDorServlet",{"dorBuild":dorBuild},function (date) {
            var option="";
            jQuery.each(date,function (i, item) {
                //value
                option+="<option value='";
                //数据库SQL尽量大写,
                option+=item.DOR_ID; //加上""就变成原意字符串了,要他的值就不能加双引号
                option+="'>";
                //显示
                option+=item.DOR_NO;
                option+="</option>";
            });
            jQuery("#dorId").html(option);
        },"JSON");
    }
</script>
</html>